<template>
  <div id="app">
    商品名称: <input type="text" v-model="add">
    商品价格: <input type="text" v-model="app">

    <button  @click="get">添加</button>

    <table border>
      
        <tr>
          <th>商品序号</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>操作</th>
        </tr>
      <tbody>
        <tr v-for="(item,index) in list " :key="index">
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>
            <button @click="del(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      add:'',
      app:'',
      list:['123']
    }
  },
  methods: {
    get(){
      console.log(this.add);
      console.log(this.app);
      this.list.push({name:this.add,age:this.app})
    },
    del(index){
      this.list.splice(index,1)
    }
  },

}
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
table{

}
</style>
